<template>
  <div id="test-page">
    <div style="margin-bottom: 20px">
      <h1>按钮组</h1>
      <div style="margin-bottom: 10px">
        <mt-button type="default">default</mt-button>
        <mt-button type="primary">primary</mt-button>
        <mt-button type="danger">danger</mt-button>
      </div>
      <div style="margin-bottom: 10px">
        <mt-button size="small">small</mt-button>
      </div>
      <div style="margin-bottom: 10px">
        <mt-button size="large">large</mt-button>
      </div>
      <div style="margin-bottom: 10px">
        <mt-button size="normal">normal</mt-button>
      </div>
      <div>
        <mt-button disabled>disabled</mt-button>
        <mt-button plain>plain</mt-button>
        <mt-button icon="back">back</mt-button>
        <mt-button icon="more">more</mt-button>
      </div>
    </div>
    <div style="margin-bottom: 20px">
      <h1>头部栏</h1>
      <div style="margin-bottom: 10px">
        <mt-header fixed title="fixed top"></mt-header>
      </div>
      <div style="margin-bottom: 10px">
        <mt-header title="long long long long title">
          <mt-button icon="back" slot="left">back</mt-button>
          <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
      </div>
      <div style="margin-bottom: 10px">
        <mt-header title="multiple button">
          <mt-button slot="left">back</mt-button>
          <mt-button slot="right">右侧</mt-button>
        </mt-header>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>单选组</h1>
      <div style="margin-bottom: 10px">
        <mt-radio
          title="radio list"
          :options="['optionA', 'optionB', 'optionC']"
        >
        </mt-radio>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>开关</h1>
      <div style="margin-bottom: 10px">
        <div style="display: inline-block">
          <mt-switch>Switch</mt-switch>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>徽章</h1>
      <div style="margin-bottom: 10px">
        <mt-badge size="small">30</mt-badge>
        <mt-badge size="normal">10</mt-badge>
        <mt-badge size="large">10</mt-badge>
      </div>
      <div style="margin-bottom: 10px">
        <mt-badge type="primary">30</mt-badge>
        <mt-badge type="error">10</mt-badge>
        <mt-badge type="success">10</mt-badge>
        <mt-badge type="warning">10</mt-badge>
      </div>
      <div style="margin-bottom: 10px">
        <mt-badge size="small" color="#888">custom color</mt-badge>
      </div>
    </div>
    <div style="margin-bottom: 20px">
      <h1>范围选择器</h1>
      <div style="margin-bottom: 10px">
        <mt-range v-model="range"></mt-range>
      </div>
      <div style="margin-bottom: 10px">
        <mt-range
          v-model="range"
          :min="0"
          :max="100"
          :step="10"
          :bar-height="5"
        >
        </mt-range>
      </div>
      <div style="margin-bottom: 10px">
        <mt-range v-model="range">
          <div slot="start">0</div>
          <div slot="end">100</div>
        </mt-range>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>区域</h1>
      <div style="margin-bottom: 10px">
        <mt-field label="username" placeholder="Input username"></mt-field>
        <mt-field
          label="email"
          placeholder="Input email"
          type="email"
        ></mt-field>
        <mt-field
          label="password"
          placeholder="Input password"
          type="password"
        ></mt-field>
        <mt-field label="phone" placeholder="Input tel" type="tel"></mt-field>
        <mt-field
          label="website"
          placeholder="Input website"
          type="url"
        ></mt-field>
        <mt-field
          label="number"
          placeholder="Input number"
          type="number"
        ></mt-field>
        <mt-field
          label="birthday"
          placeholder="Input birthday"
          type="date"
        ></mt-field>
        <mt-field
          label="introduction"
          placeholder="introduction"
          type="textarea"
          rows="4"
        ></mt-field>
      </div>
      <div style="margin-bottom: 10px">
        <mt-field label="email" state="success"></mt-field>
        <mt-field label="email" state="error"></mt-field>
        <mt-field label="email" state="warning"></mt-field>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>多选组件</h1>
      <div style="margin-bottom: 10px">
        <mt-checklist
          v-model="checkValue"
          title="checkbox list"
          :options="['optionA', 'optionB', 'optionC']"
        >
        </mt-checklist>
      </div>
      <div style="margin-bottom: 10px">
        <mt-checklist
          align="right"
          v-model="checkValue"
          :options="['optionA', 'optionB', 'optionC']"
        >
        </mt-checklist>
      </div>
    </div>
    <div style="margin-bottom: 20px">
      <h1>多选组件</h1>
      <div style="margin-bottom: 10px">
        <mt-search cancel-text="取消" placeholder="搜索" style="height: 100px">
        </mt-search>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <h1>弹窗组件</h1>
      <div style="margin-bottom: 10px">
        <mt-button @click="popupVisible = true">打开弹窗</mt-button>
        <mt-popup v-model="popupVisible" position="bottom">
          <div>123</div>
        </mt-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      range: 0,
      checkValue: [],
      popupVisible: false,
    };
  },
  components: {},
  mounted() {
    // this.$toast({
    //   message: "Upload Complete",
    //   position: "bottom",
    //   duration: 5000,
    // });
    // this.$indicator.open();
  },
};
</script>

<style lang="less">
#test-page {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  padding: 0 100px;
}
</style>
